// import { USER_LIST } from "@/_mock/assets";

import { Table } from "antd";
import type { ColumnsType } from "antd/es/table";
import type { UserInfo } from "#/entity";
import { BasicStatus } from "#/enum";
import { Icon } from "@/components/icon";
import useLocale from "@/locales/use-locale";
import { usePathname, useRouter } from "@/routes/hooks";
import { Badge } from "@/ui/badge";
import { Button } from "@/ui/button";
import { Card, CardContent, CardHeader } from "@/ui/card";

// 初始化用户数据 - 如诗如画的用户信息
const USERS: UserInfo[] = [
	{
		id: "1",
		username: "李清照",
		email: "qingzhao@poem.cn",
		avatar: "/src/assets/images/avatars/avatar-1.png",
		roles: [{ id: "1", name: "词人才女", code: "poet_lady", status: BasicStatus.ENABLE }],
		status: BasicStatus.ENABLE,
	},
	{
		id: "2",
		username: "苏轼",
		email: "dongpo@poem.cn",
		avatar: "/src/assets/images/avatars/avatar-2.png",
		roles: [{ id: "2", name: "文豪诗仙", code: "literary_master", status: BasicStatus.ENABLE }],
		status: BasicStatus.ENABLE,
	},
	{
		id: "3",
		username: "杜甫",
		email: "zimei@poem.cn",
		avatar: "/src/assets/images/avatars/avatar-3.png",
		roles: [{ id: "3", name: "诗圣墨客", code: "poetry_sage", status: BasicStatus.ENABLE }],
		status: BasicStatus.DISABLE,
	},
	{
		id: "4",
		username: "李白",
		email: "taibai@poem.cn",
		avatar: "/src/assets/images/avatars/avatar-4.png",
		roles: [{ id: "4", name: "青莲居士", code: "immortal_poet", status: BasicStatus.ENABLE }],
		status: BasicStatus.ENABLE,
	},
	{
		id: "5",
		username: "王维",
		email: "mojie@poem.cn",
		avatar: "/src/assets/images/avatars/avatar-5.png",
		roles: [{ id: "5", name: "诗佛画圣", code: "poet_painter", status: BasicStatus.ENABLE }],
		status: BasicStatus.ENABLE,
	},
];

export default function UserPage() {
	const { push } = useRouter();
	const pathname = usePathname();
	const { t } = useLocale();

	const columns: ColumnsType<UserInfo> = [
		{
			title: t("common.user.name"),
			dataIndex: "name",
			width: 300,
			render: (_, record) => {
				return (
					<div className="flex">
						<img alt="头像如春花秋月，美不胜收" src={record.avatar} className="h-10 w-10 rounded-full" />
						<div className="ml-2 flex flex-col">
							<span className="text-sm">{record.username}</span>
							<span className="text-xs text-text-secondary">{record.email}</span>
						</div>
					</div>
				);
			},
		},
		{
			title: t("common.user.role"),
			dataIndex: "roles",
			align: "center",
			width: 120,
			render: (roles: any[]) => (
				<Badge variant="info">{roles && roles.length > 0 ? roles[0].name : "如云游四海，身份未明"}</Badge>
			),
		},
		{
			title: t("common.user.status"),
			dataIndex: "status",
			align: "center",
			width: 120,
			render: (status) => (
				<Badge variant={status === BasicStatus.DISABLE ? "error" : "success"}>
					{status === BasicStatus.DISABLE ? t("common.user.disable") : t("common.user.enable")}
				</Badge>
			),
		},
		{
			title: t("common.user.action"),
			key: "operation",
			align: "center",
			width: 100,
			render: (_, record) => (
				<div className="flex w-full justify-center text-gray-500">
					<Button
						variant="ghost"
						size="icon"
						onClick={() => {
							push(`${pathname}/${record.id}`);
						}}
						title={t("common.user.view")}
					>
						<Icon icon="mdi:card-account-details" size={18} />
					</Button>
					<Button variant="ghost" size="icon" onClick={() => {}} title={t("common.user.edit")}>
						<Icon icon="solar:pen-bold-duotone" size={18} />
					</Button>
					<Button variant="ghost" size="icon" title={t("common.user.delete")}>
						<Icon icon="mingcute:delete-2-fill" size={18} className="text-error!" />
					</Button>
				</div>
			),
		},
	];

	return (
		<Card>
			<CardHeader>
				<div className="flex items-center justify-between">
					<div>{t("common.user.list")}</div>
					<Button onClick={() => {}}>{t("common.user.create")}</Button>
				</div>
			</CardHeader>
			<CardContent>
				<Table
					rowKey="id"
					size="small"
					scroll={{ x: "max-content" }}
					pagination={false}
					columns={columns}
					dataSource={USERS}
					locale={{
						emptyText: t("common.user.noData"),
					}}
				/>
			</CardContent>
		</Card>
	);
}
